<template>
  <div class="editor" @scroll.passive="handleScroll">
    <div class="editor-wrap" :style="pageStyle">
      <ComponentBg :bg="pageSetting" />
      <Grid v-show="pageSetting.isGrid" />
      <Canvas />
    </div>
  </div>
</template>

<script >
import { mapState } from 'vuex'
import Grid from "./Grid"
import Canvas from "./Canvas/index.jsx"
import EventBus from "../EventBus"
import ComponentBg from "../../common/ComponentBg"

export default {
  data() {
    return {
      scrollTop: 0,
      scrollLeft: 0
    }
  },
  computed: {
    ...mapState("lowCode", {
      pageStyle: state => {
        const {
          width,
          height,
          backgroundImage
        } = state.pageSetting
        return {
          ...state.pageSetting,
          backgroundImage: `url(${backgroundImage})`,
          width: `${width}px`,
          height: `${height}px`,
          minWidth: `${width}px`,
          minHeight: `${height}px`
        }
      },
      pageSetting: state => state.pageSetting
    })
  },
  components: {
    Grid,
    Canvas,
    ComponentBg
  },
  methods: {
    handleScroll(event){
      requestAnimationFrame(() => {
        const scrollTop = event.target.scrollTop
        const scrollLeft = event.target.scrollLeft
        EventBus.$emit('scroll', {
          scrollTop,
          scrollLeft
        })
      })


      // EventBus.$emit('scroll', {
      //   scrollTop,
      //   scrollLeft
      // })
      // this.scrollTop = scrollTop
      // this.scrollLeft = scrollLeft
    }
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
